<template>
	<div class="home-list-parent">
		<transition-group v-if='!homeList ? false : true' enter-active-class='animated fadeIn'>	
			<router-link
						tag='div'
						v-for='item of homeList' 
						:key='item._id' 
						class="home-list" 
						:class="{ home_list_active: listAct == item._id }"
						@touchstart.native='homeTouchstart(item._id)'
						@touchend.native='homeTouchend()'
						:to="'/detail/' + item._id + '/home'"
			>
		
				<!-- template 1 -->
				<div class="h1-home" v-if='item.list_userimg.length == 1'>
					<div class="l-l">
						<p class="list-title">
							{{item.list_title}}
						</p>
						<p class="list-info">
							{{item.list_info}}
						</p>
						<p class="list-author">
							<span class="iconfont user-icon">
								&#xe614;
							</span>
							{{item.list_user}}
							<span class="iconfont user-comm">
								&#xe61f;
							</span>
							{{item.list_comments.length}}
						</p>
					</div>
					<div class="l-r">
						<div class="l-r-top">
							<img 
								@load="imgLoad" 
								v-show='ListImgLoad' 
								class="l-r-top-img" 
								:src="item.list_userimg[0].list_user_child_img" 
							/>
						</div>
						<div class="l-r-bottom">
							<p>
								{{item.list_tag}}	
							</p>
						</div>
					</div>
				</div>
				<!-- template 2 -->
				<div class="h2-home" v-if='item.list_userimg.length == 3'>
					<div class="h2-title">
						{{item.list_title}}
					</div>
					<div class="h2-content">
						<div class="h2-c-l">
							<img 
								@load="imgLoad" 
								v-show='ListImgLoad'
								:src="item.list_userimg[0].list_user_child_img" 
							/>
						</div>
						<div class="h2-c-r">
							<div class="h2-c-r-t">
								<img 
									@load="imgLoad" 
									v-show='ListImgLoad'
									class="h2-c-rt-img" 
									:src="item.list_userimg[1].list_user_child_img" 
								/>
							</div>
							<div class="h2-c-r-b">
								<img 
									@load="imgLoad" 
									v-show='ListImgLoad'
									class="h2-c-rt-img" 
									:src="item.list_userimg[2].list_user_child_img" 
								/>
							</div>
						</div>
					</div>
					<div class="h2-bottom">
						<div class="h2-bottom-l">
							<span class="iconfont h2user-icon">
								&#xe614;
							</span>
							{{item.list_user}}
							<span class="iconfont h2user-comm">
								&#xe61f;
							</span>
							{{item.list_comments.length}}
						</div>
						<div class="h2-bottom-r">
							<div class="h2-b-r-tag">
								<p>
									{{item.list_tag}}	
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- template 3 -->
				<div class="h3-home" v-else-if="item.list_userimg.length == 2">
					<p class="h3-title">
						{{item.list_title}}
					</p>
					<div class="h3-img-content">
						<img 
							@load="imgLoad" 
							v-show='ListImgLoad'
							class="h3-img" 
							:src='item.list_userimg[0].list_user_child_img' 
						/>
					</div>
					<div class="h3-bottom">
						<div class="h3-bottom-l">
							<span class="iconfont h3user-icon">
								&#xe614;
							</span>
							{{item.list_user}}
							<span class="iconfont h3user-comm">
								&#xe61f;
							</span>
							{{item.list_comments.length}}
						</div>
						<div class="h3-bottom-r">
							<div class="h3-b-r-tag">
								<p>
									{{item.list_tag}}	
								</p>
							</div>
						</div>
					</div>
				</div>
				
			</router-link>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'home-list',
		props: {
			homeList: Array
		},
		data () {
			return {
				ListImgLoad: false,
				listAct: ''
			}
		},
		methods: {
			homeTouchstart (xb) {
				this.listAct = xb
			},
			homeTouchend () {
				this.listAct = false
			},
			imgLoad () {
				this.ListImgLoad = true
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	$HomeList_BgColor = #fff
	$HomeList_FontColor = #aaa
	$Home_ImgColor = #F6F6F6
	$border_radius_8px = 8px
	.home-list-parent
		border-top-left-radius:20px
		border-top-right-radius:20px
		margin-top:-20px
		position:relative
		z-index:99
		overflow:hidden
		.home-list
			border-bottom:1px #F0F0F0 solid
			background:$HomeList_BgColor
			padding:6px 8px 0 8px
			.h1-home
				display:flex
				flex-direction:row	
				.l-l
					width:502px
					overflow:hidden
					.list-title
						color:#494949
						font-size:32px
						margin:24px 0 0 22px
						line-height:50px
						display: -webkit-box
						-webkit-line-clamp: 2
						overflow:hidden
						text-overflow:ellipsis
						-webkit-box-orient: vertical
					.list-info
						color:$HomeList_FontColor
						font-size:24px
						display: -webkit-box
						-webkit-line-clamp: 3
						overflow:hidden
						text-overflow:ellipsis
						letter-spacing:1px
						margin:16px 0 0 22px	
						line-height:40px
						-webkit-box-orient: vertical
					.list-author
						margin:30px 0 30px 22px
						color:$HomeList_FontColor
						font-size:24px
						.user-icon,.user-comm
							font-size:24px
							color:$HomeList_FontColor	
						.user-comm
							font-size:22px
							margin-left:30px						
				.l-r
					width:246px
					position:relative	
					.l-r-top
						width:200px
						margin-top:32px
						float:right
						margin-right:24px	
						border-radius:$border_radius_8px
						overflow:hidden
						.l-r-top-img
							width:100%
					.l-r-bottom
						padding:2px 10px
						border:2px $public_thems_color solid
						border-radius:4px
						color:$public_thems_color
						position:absolute
						right:28px
						bottom:20px
						text-align:center
						line-height:40px
						background:$HomeList_BgColor
						font-size:22px					
			.h2-home
				padding:6px 0 0 0
				.h2-title
					margin:14px 0 0 2px
					color:#494949
					font-size:32px
					padding:0 20px
					line-height:50px
					display: -webkit-box
					-webkit-line-clamp: 2
					overflow:hidden
					text-overflow:ellipsis
					-webkit-box-orient: vertical
				.h2-content
					padding:0 22px
					height:360px
					margin-top:20px
					display:flex
					flex-direction:row	
				.h2-content img
					width:100%
					height:100%
				.h2-c-l
					width:520px
					height:100%
					background:$Home_ImgColor
					margin-right:4px
					border-radius:$border_radius_8px
					overflow:hidden
				.h2-c-r
					width:200px
					height:100%
					border-radius:$border_radius_8px
					overflow:hidden
					display:flex
					flex-direction:column
					overflow:hidden
					.h2-c-r-t
						width:100%
						height:200px
						background:$Home_ImgColor
						margin-bottom:4px
						border-radius:$border_radius_8px
						overflow:hidden
					.h2-c-r-b
						width:100%
						height:200px
						background:$Home_ImgColor
						border-radius:$border_radius_8px
						overflow:hidden
				.h2-bottom
					padding:20px 22px
					display:flex
					flex-direction:row
					color:$HomeList_FontColor
					font-size:24px
					.h2-bottom-l
						width:50%
						height:60px
						display:flex
						align-items:center
						.h2user-icon,.h2user-comm
							font-size:24px
							color:$HomeList_FontColor
							margin-right:8px
						.h2user-comm
							font-size:22px
							margin-left:30px				
					.h2-bottom-r
						width:50%
						height:60px					
						.h2-b-r-tag
							float:right
							margin-top:6px
							padding:2px 10px
							border:2px $public_thems_color solid
							border-radius:4px
							color:$public_thems_color
							text-align:center
							line-height:40px
							background:$HomeList_BgColor
							font-size:22px
			.h3-home
				//padding:6px 2px 0 2px
				padding:6px 2px 0 2px	
				.h3-title
					margin:18px 0 0 2px
					color:#494949
					font-size:32px
					padding:0 20px
					line-height:50px
					display: -webkit-box
					-webkit-line-clamp: 2
					overflow:hidden
					text-overflow:ellipsis
					-webkit-box-orient: vertical
				.h3-img-content
					height:400px
					margin:16px 0 8px 0
					padding:0 19px 0 19px
					.h3-img
						width:100%
						height:100%
						border-radius:$border_radius_8px
				.h3-bottom
					padding:20px 22px
					display:flex
					flex-direction:row
					color:$HomeList_FontColor
					font-size:24px
					.h3-bottom-l
						width:50%
						height:60px
						display:flex
						align-items:center
						.h3user-icon,.h3user-comm
							font-size:24px
							color:$HomeList_FontColor
							margin-right:8px
						.h3user-comm
							font-size:22px
							margin-left:30px
					.h3-bottom-r
						width:50%
						height:60px					
						.h3-b-r-tag
							float:right
							margin-top:6px
							padding:2px 10px
							border:2px $public_thems_color solid
							border-radius:4px
							color:$public_thems_color
							text-align:center
							line-height:40px
							background:$HomeList_BgColor
							font-size:22px
		.home_list_active
			//background-color:#EDEDED
			//background-color:#E8E8E8
			background-color:#F1F1F1
</style>
